import {changeData, getData} from "../utils/handleLocal";
import React, {useEffect, useState} from 'react';
import { useNavigate } from "react-router-dom";
import DynamicFieldSet from "../components/lineForm";
import {
    Form,
    Input,
    Button,
    Radio,
    Select,
    Cascader,
    DatePicker,
    InputNumber,
    TreeSelect,
    Switch,
} from 'antd';
const { Option } = Select


const Setting = () => {
    // hooks
    const [ setData, setSetData ] = useState(getData('setData'))
    const [form] = Form.useForm();
    useEffect(() => {
        console.log(setData,'1')
    },[])


    let navigate = useNavigate()
    //css in js
    const styleBtn = {
        marginRight:'6px'
    }

    const styleHeader = {
        padding: '15px',
        backgroundColor: '#f5f5f5',
    }

    const tailLayout = {
        wrapperCol: { offset: 8, span: 16 },
    };

    const layout = {
        labelCol: {
            span: 4,
        },
        wrapperCol: {
            span: 16,
        },
    };
    /* eslint-enable no-template-curly-in-string */

        const onFinish = (values) => {
            changeData('setData', values)
            navigate('/')
        };
        const onReset = () => form.resetFields()

        return(
        <div style={styleHeader}>
            <Form {...layout}  onFinish={onFinish} initialValues={setData} form={form}>
                <Form.Item
                    name={['username']}
                    label="用户名"
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name={['tagOpenNewPage']}
                    label="标签新开页面"
                >
                    <Select
                        placeholder="每次点开标签时是否新开新页面"
                    >
                        <Option value="true">每次开启新的页面</Option>
                        <Option value="false">替换当前页面</Option>
                    </Select>
                </Form.Item>

                <Form.Item { ... tailLayout}>
                    <Button type="primary" htmlType="submit" style={styleBtn}>
                        Submit
                    </Button>
                    <Button htmlType="button" onClick={onReset} style={styleBtn}>
                        Reset
                    </Button>
                    <Button type="primary" onClick={() => navigate(-1)} style={styleBtn}>
                        返回
                    </Button>
                </Form.Item>
            </Form>
<DynamicFieldSet/>
        </div>
    )
}

export default Setting
